<template>
  <div class="app-container">
    <div class="query">
      <div>
        <el-button size="mini" type="primary" icon="el-icon-plus" circle @click="form = {};dialogVisible = true;editPassword = true" />
      </div>
      <div>
        <el-button size="mini" icon="el-icon-refresh" circle @click="initList" />
      </div>
    </div>
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column align="center" label="#" width="95">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column align="center" label="角色名" width="130">
        <template slot-scope="scope">{{ scope.row.roleName }}</template>
      </el-table-column>
      <el-table-column align="center" label="权限" width="200">
        <template slot-scope="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column align="center" label="管理" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)" />
          <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加/修改角色" :visible.sync="dialogVisible" width="60%">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="角色名">
              <el-input v-model="form.roleName" />
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="form.remark" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit">保存</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-checkbox-group v-model="checkList" class="group-menu" @change="handleCheckGroupChange">
              <el-form-item v-for="item in menu" :key="item.id" label="">
                <el-checkbox :label="item.id">{{ item.text }}</el-checkbox>
                <el-form-item v-if="item.child" label=" ">
                  <el-checkbox v-for="child in item.child" :key="child.id" :label="child.id">{{ child.text }}</el-checkbox>
                </el-form-item>
              </el-form-item>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      dialogVisible: false,
      list: [],
      query: { page: 1, size: 20, total: 0 },
      menu: [],
      checkList: []
    }
  },
  created() {
    this.initMenu()
    this.initList()
  },
  methods: {
    initMenu() {
      this.$api.get('/api/admin/menu').then((res) => {
        this.menu = res.data
      })
    },
    initList() {
      this.$api.get('/api/admin/role', this.query).then((res) => {
        this.list = res.data
        this.query.total = res.total
      })
    },
    handleEdit(row) {
      this.form = row
      this.dialogVisible = true
      this.checkList = JSON.parse(row.menuId)
    },
    handleSubmit() {
      this.form.menuId = JSON.stringify(this.checkList)
      this.$api.put('/api/admin/role', {}, this.form).then((res) => {
        this.dialogVisible = false
        this.initList()
      })
    },
    handleDelete(row) {
      this.$api.deleteConfirm('/api/admin/role', { id: row.id }).then((res) => {
        this.initList()
      })
    },
    handleCheckGroupChange(env) {
      console.log('handleCheckGroupChange', env)
      if (env.length === 0) {
        return
      }
      const id = env[env.length - 1]
      this.menu.forEach((e) => {
        e.child.forEach((d) => {
          if (id === d.id && d.pid > 0) {
            const pid = d.pid
            if (!this.checkList.includes(pid)) this.$set(this.checkList, env.length, pid)
          }
        })
      })
    }
  }
}
</script>

<style lang="stylus">
.group-menu{
  .el-form-item__content{
    padding: 10px;
    border: 1px dashed #cccc
  }
}
</style>
